import React, { Component } from "react";
import { Layout, Menu, Dropdown, Select, Input } from 'antd';
import LayoutDropdown from './dropdown';
import { CaretDownOutlined, TaobaoOutlined, SearchOutlined,
         QqOutlined, CloudSyncOutlined, CloudFilled, AliyunOutlined, ShopOutlined } from '@ant-design/icons';
// components
// import SelectComponent from "../components/select/Index";
import logo from "../../src/logo.png";
import "./index.scss";
// Store
import Store from "@/stroe/Index";
// action
import { setDepartmentAction } from "@/stroe/action/App";
// cookies
import { getDepartment } from "../utils/cookies";

const { Header } = Layout;
const { Option } = Select;

class LayoutHeader extends Component {
    state = {
        collapsed: false,
        url: 'departmentListAll',
        method: 'get',
        name: "department_code",
        propsKey: {
            label: "name",
            value: "code"
        },
        style: { width: "200px" },
        // searchModalStatus: false
    };

    // visibleSearchModal = () => {
    //     console.log('ssss')
    //     this.setState({ searchModalStatus: false })
    // }

    handleChange = (value) => {
        console.log(`selected ${value}`);
    }

    onChangePlatform = (value) => {
        console.log(value)
        Store.subscribe(() =>
            console.log(Store.getState())
        );

        Store.dispatch(setDepartmentAction(value))
        window.location.reload();
        alert(`切换到 ${value}`);
        console.log(this.props)
    }

    menu = (
        <Menu theme="light" className="ant-dropdown-link-menu" >
            <Menu.ItemGroup title={<><CloudSyncOutlined/><span color="red"> 内部系统</span></>}>
                <Menu.Item key='1'><a href="https://sync.superboss.cc/" target="_blank" rel="noopener noreferrer">发布系统</a></Menu.Item>
                <Menu.Item key='2'><a href="https://sql.superboss.cc/" target="_blank" rel="noopener noreferrer">SQL查询系统</a></Menu.Item>
                <Menu.Item key='3'><a href="http://task.superboss.cc/index.jsp#/task/list" target="_blank" rel="noopener noreferrer">运维任务系统</a></Menu.Item>
                <Menu.Item key='4'><a href="https://cmdb.raycloud.com/index.xhtml#/server/list" target="_blank" rel="noopener noreferrer">CMDB</a></Menu.Item>
                <Menu.Item key='5'><a href="https://sso.raycloud.com/" target="_blank" rel="noopener noreferrer">RAC</a></Menu.Item>
                <Menu.Item key='6'><a href="https://biz_console.superboss.cc/" target="_blank" rel="noopener noreferrer">Diamond</a></Menu.Item>
                <Menu.Item key='7'><a href="https://jumpserver.superboss.cc/" target="_blank" rel="noopener noreferrer">JumpServer(堡垒机)</a></Menu.Item>
                <Menu.Item key='8'><a href="http://dataease.raycloud.cn/" target="_blank" rel="noopener noreferrer">DataEase(数据报表)</a></Menu.Item>
                <Menu.Item key='8'><a href="http://grafana1.raycloud.com/" target="_blank" rel="noopener noreferrer">Grafana(监控)</a></Menu.Item>                
                <Menu.Item key='9'><a href="https://kibana_nginx.superboss.cc/" target="_blank" rel="noopener noreferrer">Kibana(线上日志分析)</a></Menu.Item>
                <Menu.Item key='10'><a href="https://tb.raycloud.com/" target="_blank" rel="noopener noreferrer">Teambition(任务协同)</a></Menu.Item>
                <Menu.Item key='11'><a href="http://dz-zk.superboss.cc/#/home/index" target="_blank" rel="noopener noreferrer">DubboAdmin</a></Menu.Item>
            </Menu.ItemGroup>

            <Menu.ItemGroup title={<><ShopOutlined /><span color="red"> 商家平台</span></>}>
                <Menu.Item key='101'><a href="https://open.taobao.com/" target="_blank" rel="noopener noreferrer">淘宝开放平台</a></Menu.Item>
                <Menu.Item key='102'><a href="https://open-console.jd.com/" target="_blank" rel="noopener noreferrer">京东开放平台</a></Menu.Item>
                <Menu.Item key='103'><a href="https://open.pinduoduo.com/application/app/list" target="_blank" rel="noopener noreferrer">拼多多开放平台</a></Menu.Item>
                <Menu.Item key='104'><a href="https://op.jinritemai.com/console/app-manage/center" target="_blank" rel="noopener noreferrer">抖店开放平台</a></Menu.Item>
                <Menu.Item key='105'><a href="https://open.kuaishou.com/platform" target="_blank" rel="noopener noreferrer">快手开放平台</a></Menu.Item>
                <Menu.Item key='106'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='107'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='108'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='109'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='110'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='111'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='112'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
            </Menu.ItemGroup>

            <Menu.ItemGroup title={<><AliyunOutlined /><span color="red"> 阿里云</span></>} >
                <Menu.Item key='201'><a href="https://help.aliyun.com/" target="_blank" rel="noopener noreferrer">帮助文档</a></Menu.Item>
                <Menu.Item key='202'><a href="https://api.aliyun.com/document" target="_blank" rel="noopener noreferrer">OpenAPI</a></Menu.Item>
                <Menu.Item key='203'><a href="https://ecs.console.aliyun.com/" target="_blank" rel="noopener noreferrer">云服务器</a></Menu.Item>
                <Menu.Item key='204'><a href="https://rdsnext.console.aliyun.com/" target="_blank" rel="noopener noreferrer">云数据库RDS</a></Menu.Item>
                <Menu.Item key='205'><a href="https://slb.console.aliyun.com/" target="_blank" rel="noopener noreferrer">负载均衡SLB</a></Menu.Item>
                <Menu.Item key='206'><a href="https://vpc.console.aliyun.com/" target="_blank" rel="noopener noreferrer">专有网络VPC</a></Menu.Item>
                <Menu.Item key='207'><a href="https://kvstore.console.aliyun.com/" target="_blank" rel="noopener noreferrer">云数据库Redis</a></Menu.Item>
                <Menu.Item key='208'><a href="https://oss.console.aliyun.com/" target="_blank" rel="noopener noreferrer">对象存储OSS</a></Menu.Item>
                <Menu.Item key='209'><a href="https://nasnext.console.aliyun.com/" target="_blank" rel="noopener noreferrer">文件存储NAS</a></Menu.Item>
                <Menu.Item key='210'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='211'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='212'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
            </Menu.ItemGroup>

            <Menu.ItemGroup title={<><TaobaoOutlined/><span color="red"> 聚石塔</span></>}>
                <Menu.Item key='301'><a href="https://console.cloud.tmall.com/resourceView#/aliyun/product?productCode=ecs" target="_blank" rel="noopener noreferrer">云服务器</a></Menu.Item>
                <Menu.Item key='302'><a href="https://console.cloud.tmall.com/resourceView#/aliyun/product?productCode=cs" target="_blank" rel="noopener noreferrer">容器服务</a></Menu.Item>
                <Menu.Item key='303'><a href="https://console.cloud.tmall.com/resourceView#/aliyun/product?productCode=slb" target="_blank" rel="noopener noreferrer">负载均衡SLB</a></Menu.Item>
                <Menu.Item key='304'><a href="https://console.cloud.tmall.com/resourceView#/aliyun/product?productCode=vpc" target="_blank" rel="noopener noreferrer">专有网络VPC</a></Menu.Item>
                <Menu.Item key='305'><a href="https://console.cloud.tmall.com/resourceView#/aliyun/product?productCode=rds" target="_blank" rel="noopener noreferrer">云数据库RDS</a></Menu.Item>
                <Menu.Item key='306'><a href="https://console.cloud.tmall.com/resourceView#/aliyun/product?productCode=redis" target="_blank" rel="noopener noreferrer">云数据库Redis</a></Menu.Item>
                <Menu.Item key='307'><a href="https://console.cloud.tmall.com/resourceView#/aliyun/product?productCode=bucket" target="_blank" rel="noopener noreferrer">对象存储OSS</a></Menu.Item>
                <Menu.Item key='308'><a href="https://console.cloud.tmall.com/resourceView#/aliyun/product?productCode=nas" target="_blank" rel="noopener noreferrer">文件存储NAS</a></Menu.Item>
                <Menu.Item key='309'><a href="https://console.cloud.tmall.com/resourceView#/aliyun/product?productCode=dms" target="_blank" rel="noopener noreferrer">数据管理DMS</a></Menu.Item>
                <Menu.Item key='310'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='311'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='312'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
            </Menu.ItemGroup>

            <Menu.ItemGroup title={<><QqOutlined/><span color="red"> 腾讯云</span></>}>
                <Menu.Item key='401'><a href="https://cloud.tencent.com/document/product" target="_blank" rel="noopener noreferrer">帮助文档</a></Menu.Item>
                <Menu.Item key='402'><a href="https://console.cloud.tencent.com/api/explorer" target="_blank" rel="noopener noreferrer">OpenAPI</a></Menu.Item>
                <Menu.Item key='403'><a href="https://console.cloud.tencent.com/cvm/instance/index" target="_blank" rel="noopener noreferrer">云服务器</a></Menu.Item>
                <Menu.Item key='404'><a href="https://console.cloud.tencent.com/cdb" target="_blank" rel="noopener noreferrer">云数据库MySQL</a></Menu.Item>
                <Menu.Item key='405'><a href="https://console.cloud.tencent.com/clb/instance" target="_blank" rel="noopener noreferrer">负载均衡</a></Menu.Item>
                <Menu.Item key='406'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='407'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='408'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='409'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='410'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='411'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='412'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
            </Menu.ItemGroup>

            <Menu.ItemGroup title={<><CloudFilled /><span color="red"> 京东云</span></>}>
                <Menu.Item key='501'><a href="https://docs.jdcloud.com/cn/" target="_blank" rel="noopener noreferrer">帮助文档</a></Menu.Item>
                <Menu.Item key='502'><a href="https://yd-console.jdcloud.com/#/vm/host/list" target="_blank" rel="noopener noreferrer">云服务器</a></Menu.Item>
                <Menu.Item key='503'><a href="https://yd-cns-console.jdcloud.com/host/loadBalance/list" target="_blank" rel="noopener noreferrer">负载均衡</a></Menu.Item>
                <Menu.Item key='504'><a href="https://yd-rds-console.jdcloud.com/rds/database" target="_blank" rel="noopener noreferrer">云MySQL</a></Menu.Item>
                <Menu.Item key='505'><a href="https://datastore-yd-console.jdcloud.com/redis" target="_blank" rel="noopener noreferrer">云Redis</a></Menu.Item>
                <Menu.Item key='506'><a href="https://yd-mongodb-console.jdcloud.com/mongodb" target="_blank" rel="noopener noreferrer">云Mongodb</a></Menu.Item>
                <Menu.Item key='507'><a href="https://yd-cns-console.jdcloud.com/vpc/list" target="_blank" rel="noopener noreferrer">私有网络VPC</a></Menu.Item>
                <Menu.Item key='508'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='509'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='519'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='520'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='521'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
            </Menu.ItemGroup>

            <Menu.ItemGroup title={<><CloudFilled /><span color="red"> 拼多多</span></>}>
                <Menu.Item key='601'><a href="https://open.pinduoduo.com/paas/service" target="_blank" rel="noopener noreferrer">容器服务</a></Menu.Item>
                <Menu.Item key='602'><a href="https://open.pinduoduo.com/paas/slb" target="_blank" rel="noopener noreferrer">负载均衡</a></Menu.Item>
                <Menu.Item key='603'><a href="https://open.pinduoduo.com/paas/rds/mysql" target="_blank" rel="noopener noreferrer">云MySQL</a></Menu.Item>
                <Menu.Item key='604'><a href="https://open.pinduoduo.com/saas/redis" target="_blank" rel="noopener noreferrer">云Redis</a></Menu.Item>
                <Menu.Item key='605'><a href="https://open.pinduoduo.com/saas/mongodb" target="_blank" rel="noopener noreferrer">云Mongodb</a></Menu.Item>
                <Menu.Item key='606'><a href="https://open.pinduoduo.com/saas/zookeeper" target="_blank" rel="noopener noreferrer">云ZK</a></Menu.Item>
                <Menu.Item key='607'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='608'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='609'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='610'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='611'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='612'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
            </Menu.ItemGroup>

            <Menu.ItemGroup title={<><CloudFilled /><span color="red"> 抖店云</span></>}>
                <Menu.Item key='701'><a href="https://opencloud.jinritemai.com/ecs" target="_blank" rel="noopener noreferrer">云服务器</a></Menu.Item>
                <Menu.Item key='702'><a href="https://console4ec.volcengine.com/clb/region:clb+cn-beijing/LoadBalancer?projectName=default" target="_blank" rel="noopener noreferrer">负载均衡</a></Menu.Item>
                <Menu.Item key='703'><a href="https://opencloud.jinritemai.com/db/mysql" target="_blank" rel="noopener noreferrer">云MySQL</a></Menu.Item>
                <Menu.Item key='704'><a href="https://opencloud.jinritemai.com/db/redis" target="_blank" rel="noopener noreferrer">云Redis</a></Menu.Item>
                <Menu.Item key='705'><a href="https://opencloud.jinritemai.com/db/mongodb" target="_blank" rel="noopener noreferrer">云Mongodb</a></Menu.Item>
                <Menu.Item key='706'><a href="https://console4ec.volcengine.com/vpc/region:vpc+cn-beijing/vpc?projectName=default" target="_blank" rel="noopener noreferrer">私有网络VPC</a></Menu.Item>
                <Menu.Item key='707'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='708'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='709'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='710'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='711'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='712'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
            </Menu.ItemGroup>

            <Menu.ItemGroup title={<><CloudFilled /><span color="red"> 火山引擎</span></>}>
                <Menu.Item key='801'><a href="https://www.volcengine.com/docs" target="_blank" rel="noopener noreferrer">帮助文档</a></Menu.Item>
                <Menu.Item key='802'><a href="https://console.volcengine.com/ecs" target="_blank" rel="noopener noreferrer">云服务器</a></Menu.Item>
                <Menu.Item key='803'><a href="https://console4ec.volcengine.com/clb/region:clb+cn-beijing/LoadBalancer?projectName=default" target="_blank" rel="noopener noreferrer">负载均衡</a></Menu.Item>
                <Menu.Item key='804'><a href="https://opencloud.jinritemai.com/db/mysql" target="_blank" rel="noopener noreferrer">云MySQL</a></Menu.Item>
                <Menu.Item key='805'><a href="https://opencloud.jinritemai.com/db/redis" target="_blank" rel="noopener noreferrer">云Redis</a></Menu.Item>
                <Menu.Item key='806'><a href="https://opencloud.jinritemai.com/db/mongodb" target="_blank" rel="noopener noreferrer">云Mongodb</a></Menu.Item>
                <Menu.Item key='807'><a href="https://console4ec.volcengine.com/vpc/region:vpc+cn-beijing/vpc?projectName=default" target="_blank" rel="noopener noreferrer">私有网络VPC</a></Menu.Item>
                <Menu.Item key='808'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='809'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='810'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='811'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
                <Menu.Item key='812'><a href="https://google.com/" style={{ color: "#FFFFFF"}}>Other</a></Menu.Item>
            </Menu.ItemGroup>
        </Menu>
    );
    

    render() {
        // const { url, method, name,propsKey,style } = this.state;
        const pathname = window.location.pathname
        const menuKey = pathname.split("/").slice(0, 3).join('/')
        console.log(menuKey)
        const current_dept = getDepartment()

        const suffix = (
            <SearchOutlined
              style={{
                fontSize: 16,
                color: '#1890ff',
              }}
            />
        );

        return (
            <Header className="site-layout-header">
                <a className="logo" href="/index/home/dashboard">
                    <img src={logo} alt="logo" style={{ height: '28px'}}/>
                </a>
                {/* <div>
                        { menuKey === '/index/galaxy' ? <SelectComponent style={style} url={url} method={method} propsKey={propsKey} name={name} /> : null }
                </div> */}
                <Dropdown overlay={this.menu}>
                    {/* eslint-disable-next-line */}
                    <a className="ant-dropdown-link-nav" onClick={e => e.preventDefault()}>
                        导航栏 <CaretDownOutlined />
                    </a>
                </Dropdown>
                <Select className="ant-dropdown-link-nav" defaultValue={current_dept} style={{ width: 120, textAlign: 'center' }} onChange={this.onChangePlatform}>
                    <Option value="share">共享事业部</Option>
                    <Option value="kuaiyun">广告事业部</Option>
                    <Option value="youcheng">有成事业部</Option>
                    <Option value="kmyj">快麦硬件事业部</Option>
                    <Option value="kmsj">快麦人工智能事业部</Option>
                    <Option value="dsj">快麦大商家事业部</Option>
                    <Option value="crm">CRM事业部</Option>
                    <Option value="zx">中小商家事业部</Option> 
                </Select>
                <div className="header-search">
                    <Input placeholder="Global fuzzy search" suffix={suffix} style={{ 'border-radius': '12px' }} />
                </div>
                <div className="ant-dropdown-link-username">
                    <a className="header-doc" href='https://gykj.yuque.com/qhagw5/kml348/gvonu7' target="_blank" rel="noopener noreferrer">文档</a>
                    {/* eslint-disable-next-line */}
                    <a className="header-user"><LayoutDropdown /></a>
                </div>
                {/* <Modal visible={this.visibleSearchModal}>111</Modal> */}
            </Header>
        );
    }
}

export default LayoutHeader